<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时钟 | CSS JS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="clock">
        <div class="hour">
            <div class="hr"></div>
        </div>
        <div class="min">
            <div class="mn"></div>
        </div>
        <div class="sec">
            <div class="sc"></div>
        </div>
    </div>
</body>
<script>
    const hr = document.querySelector('.hr');
    const mn = document.querySelector('.mn');
    const sc = document.querySelector('.sc');

    setInterval(() => {

        const t = new Date();

        /* 12 * 30 = 360; 60 * 6 = 360  */
        let hh = t.getHours() * 30;
        let mm = t.getMinutes() * 6;
        let ss = t.getSeconds() * 6;

        hr.style.transform = `rotateZ(${hh + mm /12}deg)`;
        mn.style.transform = `rotateZ(${mm}deg)`;
        sc.style.transform = `rotateZ(${ss}deg)`;

    });
</script>
</html>
